<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head th:include="page/index::head">
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body class="layui-layout-body layuimini-all">

<div class="layui-layout layui-layout-admin">
    <!--头部-->
    <div th:replace="page/admin_fragment::nav" class="layui-header header">
    </div>
    <!--左边栏-->
    <div th:replace="page/admin_fragment::left" class="layui-side layui-bg-black">

    </div>
    <!--中间部分-->
    <div class="layui-body">

        <div class="layuimini-content-page " style="background: url('../../static/images/welcome.jpg')">

            <!--初始化中间内容 welcome页面-->
            <div id="content-mid" class="layui-container content">
                <h2 class="layui-container welcome"
                    style="position: center;left:200px;color: #4a3dd1; top: 150px;width: 800px;height: 30px;">
                    管理员，<a href="javascript:void(0)"><span style="color: crimson"
                                                           th:text="${session.user.username}"></span></a> 欢迎回来！</h2>
                <div class="private_score" style="display: none;padding-top: 80px;">
                    <table class="layui-table ">
                        <thead>
                        <tr>
                            <td>总积分</td>
                            <td>备注</td>
                            <td>上次积分</td>
                            <td>更新时间</td>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>

                        </tr>
                        </tbody>
                    </table>
                </div>

            </div>


        </div>
    </div>

</div>
<script th:src="@{/lib/jquery-3.4.1/jquery-3.4.1.min.js}" src="../../static/lib/jquery-3.4.1/jquery-3.4.1.min.js"
        charset="utf-8"></script>
<script th:src="@{/lib/layui-v2.5.5/layui.js?v=1.0.4}" src="../../static/lib/layui-v2.5.5/layui.js?v=1.0.4"
        charset="utf-8"></script>
<script th:src="@{/js/lay-config.js?v=1.0.4}" src="../../static/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery.session@1.0.0/jquery.session.min.js"></script>
<script type="text/javascript">

    layui.use(['layer', 'layuimini'], function () {

        $('.login-out').on("click", function () {
            layer.msg('正在退出登录', function () {
                window.location = '/user/logout';
            });
        });
        layuimini.listen();

    });

    /*查询用户积分详情*/
    $('#componentHeaderId').click(function () {
        console.log("可以点击");
        getScore();
    });

    function getScore() {
        $.ajax({
            url: "/integration/my_score",
            method: 'POST',
            dataType: 'json',
            async: false,
            cache: false,
            success: function (result) {
                //获取失败

                if (result.status != 0) {
                    alert(result.msg);
                    return false;
                } else {
                    //改变content,显示用户积分前以及现在的我积分情况
                    $('.welcome').css('display', 'none');
                    var totalScore = $("<td></td>").append(result.data.totalScore);
                    var remark = $("<td></td>").append(result.data.remark);
                    var beforeScore = $("<td></td>").append(result.data.beforeScore);
                    var updateTime = $("<td></td>").append(result.data.updateTime);

                    console.log('time' + updateTime);
                    $('.private_score table tbody tr').append(totalScore)
                        .append(remark).append(beforeScore)
                        .append(updateTime);
                    $('.private_score').css('display', 'block');
                    $('#componentHeaderId').css('pointer-events', 'none');
                }

            },
        });
    }
    /*头像上传*/
    $(".uploadAvatar").click(function () {
        layer.open({
            type: 1
            , title: '上传头像' //不显示标题栏
            , closeBtn: 2
            , area: '300px;'
            , id: 'upload-avatar' //设定一个id，防止重复弹出
            , resize: false
            , btnAlign: 'c'
            , moveType: 1 //拖拽模式，0或者1
            , content: $(".magt3")

        });
        layui.use('upload', function () {
            var upload = layui.upload;
            var uploadInst = upload.render({
                elem: '#test1'
                ,auto:true

                , url: '/user/projectPictureUpload'
                , method: 'post'
                , accept: 'images'
                , acceptMime: 'image/*'
                , field: 'projectImg'
                ,before: function(obj){
                    //预读本地文件示例，不支持ie8
                    obj.preview(function(index, file, result){
                        $("#demo1").attr('src',result);
                    })}
                , done: function (res) {
                    //如果上传失败
                    if (res.status == 1) {
                        return layer.msg('上传项目图片失败', {icon: 5});
                    }
                    //上传成功,获得图片地址
                    console.log(res.data);

                    $('.avatar').attr('src', res.data);
                    layer.closeAll();
                    // window.location.reload();
                }
                , error: function () {
                    //演示失败状态，并实现重传
                    var demoText = $('#demoText');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function () {
                        uploadInst.upload();
                    });
                }
            });
        });
    });

</script>
</body>

<!--上传头像框-->
<div class="layui-form layui-form-item magt3">

    <div class="layui-upload">
        <button type="button" class="layui-btn" style="margin-left: 100px;" id="test1">选择图片</button>
        <div class="layui-upload-list">
            <img class="layui-upload-img" id="demo1" style="margin-left:80px;width: 140px;height: 115px;">
            <p id="demoText"></p>
        </div>

    </div>

</div>



</html>